import React, { Component } from 'react';
import { Link, Route, Switch } from 'react-router-dom';

const routes = [
    {
        path: '/',
        exact: true,
        siderbar: () => <div>home!</div>,
        main: () => <h2>Home</h2>
    },
    {
        path: '/bubblegum',
        siderbar: () => <div>bubblegum!</div>,
        main: () => <h2>Bubblegum</h2>
    },
    {
        path: '/shoelaces',
        siderbar: () => <div>shoelaces!</div>,
        main: () => <h2>Shoelaces</h2>
    }
];

class Sidebar extends Component {
    render () {
        return (
            <div>
                <div className="siderbar">
                    <ul>
                        {
                            routes.map(({ path }) => (
                                <li key={path}><Link to={path}>{path}</Link></li>
                            ))
                        }
                    </ul>
                </div>
                <div className="main">
                    <Switch>
                        {
                            routes.map(({ path, exact, siderbar }, index) => (
                                <Route key={index} path={path} exact={exact} children={siderbar}></Route>
                            ))
                        }
                    </Switch>
                </div>
            </div>
        );
    }
}

export default Sidebar;
